<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <div th:include="common :: css"></div>
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="save"> 保存 </button>
        </div>
    </script>
    <div class="layuimini-main">
        <div>
            <table id="currentTableId" class="layui-table" lay-filter="currentTableFilter"></table>
        </div>
    </div>
</div>

    <div th:include="common :: js"></div>
<script>
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;

        var cols = [
            {type: "checkbox", width: 50},
            {field: 'title', width: 100, title: '菜单名称'},
            {field: 'href', title: '菜单href'},
            {
                field: 'pid', width: 80, align: 'center', templet: function (d) {
                    if (d.pid == 0) {
                        return '<span class="layui-badge layui-bg-blue">目录</span>';
                    }else {
                        return '<span class="layui-badge-rim">菜单</span>';
                    }
                }, title: '类型'
            }
        ];

        table.render({
            elem: '#currentTableId',//指定table的id
            url: '/systemMenu/getAuths',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [cols],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            done: function(res, page, count){
                //可以自行添加判断的条件是否选中
                //这句才是真正选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中
                // res.data[0]["LAY_CHECKED"]='true';
                //下面三句是通过更改css来实现选中的效果
                for (var i = 0; i < res.data.length; i++) {
                    var item = res.data[i];
                    var menus = '[[${role.menus}]]';
                    var index= item['LAY_TABLE_INDEX'];
                    $('tr[data-index=' + index + '] input[type="checkbox"]').val(item.id);
                    if (menus.indexOf(item.id) != -1) {
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
            }
        });

        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'save') {  // 监听添加操作
                var checkStatus = table.checkStatus('currentTableId');
                var data = checkStatus.data;

                var ids = "";
                // for(var i = 0; i < data.length; i++) {
                //     ids += data[i].id;
                //     if (i != data.length - 1) {
                //         ids += ","
                //     }
                // }

                var count = $('input:checkbox:checked').length;
                $('input:checkbox:checked').each(function (index, item) {
                    var val = $(this).val();
                    if (val != 'on') {
                        ids += val;
                        if (index != count - 1) {
                            ids += ","
                        }
                    }
                });
                console.log(ids);
                layer.confirm("是否保存", {icon: 3, title:"提示"}, function(index){
                    $.post("/role/save", {
                        id: [[${role.id}]],
                        menus: ids
                    }, function (result) {
                        layer.close(index);


                        // 关闭弹出层
                        layer.close();

                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    });
                });
                return false;
            }
        });

        //监听工具条
        table.on('tool(currentTableId)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });
    });
</script>
</body>
</html>